<template>
  <el-container style="height: 100%">
    <el-main>
      <el-card style="height: 100%">
        <div slot="header" class="clearfix">
          <strong style="font-size: 20px;margin-left: 1%">统计区</strong>
          <div class="block" style="margin-left: 30%">
            <el-date-picker
                v-model="period"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期" :change="getStatistic()">
            </el-date-picker>
          </div>
        </div>
        <div>
          <div ref="chart" style="width:100%;height: 400%"></div>
        </div>
      </el-card>
      <el-dialog title="问题区" :visible.sync="dialogTableVisible">
        <div style="height:500px;" class="scrollbar">
          <el-scrollbar style="height:100%">
            <el-timeline style="margin-top: 16px">
              <el-timeline-item v-for="(info,index) in problems" :key="info.problemId" :timestamp="info.updatedProblemTime" placement="bottom">
                <el-card class="item" @click.native="gotoDiscussionDetail(info.problemId)">
                  <div class="d-flex align-center">
                    <el-avatar size="small" :src="baseUrl + info.avatarURL"> </el-avatar> <div style="margin-left: 4px;font-size: 16px">{{info.title}}</div>
                  </div>
                  <div style="font-size: 14px;margin-top: 16px;margin-left: 10px;margin-bottom: 8px">{{info.content}}</div>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-scrollbar>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import {getAllStatistic} from "../../network/Details/course";
import {request} from "../../network/request";
import {getproblems} from "../../network/Details/problem/problem";

export default {
  name: "Statistic",
  mounted() {
    this.getStatistic()
  },
  data(){
    return {
      period:[],
      source: [],
      dialogTableVisible: false,
      problems: [],
      baseUrl: this.$store.state.ossBaseUrl
    }
  },
  methods: {
    getEchartData() {
      const _this = this;
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          dataset: {
            source: _this.source
          },
          xAxis: {},
          yAxis: {type: 'category'},
          series: [
            {
              type: 'bar',
              encode: {
                // 将 "amount" 列映射到 X 轴。
                x: 'amount',
                // 将 "product" 列映射到 Y 轴。
                y: 'product'
              }
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
        this.$on('hook:destroyed', () => {
          window.removeEventListener("resize", function () {
            myChart.resize();
          });
        }),
            myChart.getZr().on('click', params => { // 柱形图点击事件
              var pointInPixel = [params.offsetX, params.offsetY]
              // 判断给定的点是否在指定的坐标系
              if (myChart.containPixel('grid', pointInPixel)) {
                const xIndex = myChart.convertFromPixel({seriesIndex: 0}, [params.offsetY, params.offsetY])[1]
                const option = myChart.getOption()
                if (xIndex >= 0) { // 非空校验，防止没数据点击空白图表跳转
                  console.log(_this.source[xIndex + 1][2])
                   _this.dialogTableVisible = true

                  getproblems({username:_this.source[xIndex + 1][2], courseId:this.$route.query.id, startTime:_this.period[0], endTime: _this.period[1]},'post')
                  .then( res => {
                    _this.problems = res.data;})

                }
              }
            })
      }
    },
    getStatistic(){
      const _this = this;
      getAllStatistic({courseId: this.$route.query.id, start: _this.period[0], end: _this.period[1]}, "post").then(res => {
          _this.source = res.data
        console.log("source:" + _this.source)
        this.getEchartData()
      })
    },
    gotoDiscussionDetail(problemId){
      console.log(problemId)
      this.$router.push({
        name:"DiscussionDetail",
        query:{
          problemId:problemId
        }
      })}
  },
  created() {

  }
}
</script>

<style scoped>
.item:hover {
  transform: translateY(-8px);
  transition: transform 0.2s;
  background: Transparent;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-container{
  width: 1200px;
  margin: auto;
}
.css-au84nr-Rank {
  font-size: 14px;
  line-height: 20px;
  min-width: 10px;
  font-family: TypoRound;
  font-style: italic;
  font-weight: 700;
  transform: translateY(1px);
  color: rgba(255,161,22, 1);
}
.css-fyk6rv-layer1-CardContainer:hover {
  background: rgba(	126, 126, 126, 0.04);
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(0,0,0, 0.1),0px 2px 8px rgba(0,0,0, 0.08);
  user-select: none;
  padding: 16px 16px 4px;
}
.css-fyk6rv-layer1-CardContainer {
  padding: 16px 16px 4px;
}
.cd .cd:active, .cd:hover, .cd:focus {
  color: rgba(65,145,255, 1);
  text-decoration: none;
}
.cd {
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects;
}
</style>
